<template>
  <p>{{mainStore.count}}</p>
  <p>{{mainStore.foo}}</p>
  <p>{{mainStore.arr}}</p>
  <hr>
  <p>解构</p>
  <p>{{count}}</p>
  <p>{{foo}}</p>
  <p>{{arr}}</p>
  <button @click="changeHandler">点我增加计数</button>
</template>

<script lang="ts" setup>
import { storeToRefs } from 'pinia'
import { useMainStore } from '../store'

const mainStore = useMainStore()

console.log(mainStore.count)

// 当希望通过解构获取值时
// const { count,foo } = mainStore ----------> 由于不是响应式，只能单一次获取，且无法更改属性值(类似vue3 toref())
// pinia相当于把state做了reactive处理，应该通过导入storeToRefs进行ref响应式代理
const { count, foo, arr } = storeToRefs(mainStore)

const changeHandler = () => {
  mainStore.count++
  mainStore.foo = 'hello'

  mainStore.$patch({
    count: mainStore.count++,
    foo: 'hello',
    arr: [...mainStore.arr, 4]
  })

  mainStore.$patch(state => {
    state.count++,
    state.foo = 'hello',
    state.arr.push(4)
  })

  mainStore.changeState()
}
</script>
